<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	<mescroll-uni
		:ref="'mescrollRef'"
		@init="mescrollInit"
		height="100%"
		:top="top"
		:down="downOption"
		@down="downCallback"
		:up="upOption"
		@up="upCallback"
		@emptyclick="emptyClick"
	>
		<!-- 数据列表 -->
		<view class="input-with-btn" style="display:flex;padding:16rpx 20rpx">
			<uni-search-bar ref="refSearchBar" class="input" placeholder="搜索" cancelButton="none" bgColor="#f0f0f0" style="background: #fff;" @confirm="onSearchConfirm" />
			<view  @click="onCameraClick" style="width:" class="button"><text class="lg text-gray cuIcon-camerafill"></text></view>
		</view>
		<equip-list :list="eqList" :confirmCode="confirmCode"></equip-list>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
import EquipList from './equip-list.vue';
import api from '@/serveices/device-api.js';
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		EquipList
	},
	data() {
		return {
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					tip: '~ 空空如也 ~', // 提示
					btnText: '去看看'
				}
			},
			searchText: '',
			eqList: [] //列表数据
		};
	},
	watch:{
		'deletedTaskIds'(){
			var ids = this.deletedTaskIds
			for(var i=this.eqList.length-1;i>=0;i--){
				var cur = this.eqList[i]
				if(ids.indexOf(cur.id)>-1){
					this.eqList.splice(i,1)
				}
			}
		}
	},
	props: {
		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		index: {
			// 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			type: Number,
			default() {
				return 0;
			}
		},
		tabs: {
			// 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default() {
				return [];
			}
		},
		type: String,
		top: {
			type: Number,
			default: 100
		},
		confirmCode: String,
		maintainType: String,
		deletedTaskIds:Array
	},
	methods: {
		fetch(pageNum, pageSize) {
			return api.getequipmenttasklist({
				keywords: this.searchText,
				//确认类型,1=班长确认,2=质量确认,''=默认
				confirmCode: this.confirmCode || '',
				//maintainType：维护类别：1点检2保养3维修
				maintainType: this.maintainType + '',
				doStatus: this.i,
				page: pageNum,
				rows: pageSize
			});
		},

		/*下拉刷新的回调 */
		downCallback() {
			this.$emit('refresh')
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			let keyword = ''; //this.tabs[this.i].name
			this.fetch(page.num, page.size)
				.then(ret => {
					var curPageData = ret.data.rows;
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.length);
					//设置列表数据
					if (page.num == 1) this.eqList = []; //如果是第一页需手动制空列表
					this.eqList = this.eqList.concat(curPageData); //追加新数据
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		//点击空布局按钮的回调
		emptyClick() {
			uni.showToast({
				title: '点击了按钮,具体逻辑自行实现'
			});
		},
		onSearchConfirm({ value }) {
			this.searchText = value;
			console.log("onSearchConfirm")
			this.downCallback();
		},
		removeTask(id) {
			this.eqList.forEach(x => {
				if (x.id === id) {
					x.__hide = true;
				}
			});
		},
		onCameraClick(){
			// this.$refs.refSearchBar.searchValue("aaaa")
			uni.scanCode({
				success:(ret)=> {
					this.$refs.refSearchBar.searchValue(ret.result)
					this.$nextTick(()=>{
						this.onSearchConfirm({
							value:ret.result
						})
					})
					
					console.log(ret)
				}
			})
		}
		
	},
	onLoad() {
		uni.$on('onEquipTaskDetailSave', (e)=>{
			console.log(e)
			console.log(this.tabs)
		})
	}
};
</script>
<style lang="less" >
	
	
</style>